<template>
	<view class="charging-page">
		<!-- 左上角装饰方块 -->
		<view class="decoration-block"></view>
		
		<!-- 顶部导航标签 -->
		<view class="main-tabs">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="station-header-section" :style="{ 'padding-right': customRightPadding + 'px' }">
				<view class="station-title-section">
					<text class="station-title">利行充电</text>
					<!-- 右侧装饰图片 -->
					<image class="car-image" src="/static/images/car.png" mode="aspectFit"></image>
					<image class="piles-image" src="/pagesOne/static/images/piles.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 顶部搜索区域 -->
			<view class="search-bar">
				<view class="search-bar-left">
					<view
						class="filter-tab"
					>上海 ▼</view>
				</view>
				<view class="search-bar-divider"></view>
				<view class="search-input-container">
					<input
						class="search-bar-input"
						placeholder="搜索目的地/电站"
						placeholder-class="search-bar-placeholder"
						@click="goToSearchPage"
					/>
					<view class="search-button">搜索</view>
				</view>
			</view>
			
			<!-- 功能图片区域 -->
			 <!--
			<view class="function-images-section">
				<view class="function-image-item">
					<image src="/static/images/司机生活@2x.png" class="function-image" mode="aspectFit" />
				</view>
				<view class="function-image-item">
					<image src="/static/images/出行平台@2x.png" class="function-image" mode="aspectFit" />
				</view>
			</view>
			-->
			<!-- 第一行图片 -->
			<view class="single-image-section">
				<image src="https://static.lixingpt.com/054c31df-e5e4-444c-a69a-3482f5cc215c.png" class="single-image1" mode="aspectFit" />
			</view>
			
			<!-- 第二行图片 -->
			<view class="single-image-section">
				<image src="https://static.lixingpt.com/267a7c4d-fa14-4545-8b73-2eda81dd6ad4.png" class="single-image2" mode="aspectFit" />
			</view>
			
			<!-- 第三行图片 -->
			<view class="single-image-section">
				<image src="https://static.lixingpt.com/3ae6364a-9f9b-4a5a-93fd-9e55f76c4978.png" class="single-image3" mode="aspectFit" />
			</view>
			<!-- 新人充电特惠 -->
			 <!--
			<view class="promotion-section">
				<view class="promotion-card">
					<view class="promotion-header">
						<text class="promotion-title">新人完单就得></text>
						<view class="countdown">
							<text class="countdown-text">倒计时</text>
							<uni-countdown
								:day="2"
								:hour="13"
								:minute="50"
								:second="29"
								splitorColor="#fff"
								background-color="#fff"
								color="#ff6b35"
								border-color="transparent"
								show-day
							/>
						</view>
					</view>
					<view class="promotion-coupons">
						<view
							class="coupon-ticket"
							v-for="(item, idx) in couponList"
							:key="idx"
						>
							<view class="ticket-lock">
								<view class="lock-bg">
									<uni-icons type="locked-filled" color="#fff" size="14" />
								</view>
							</view>
							<view class="ticket-content">
								<view class="ticket-amount"><text>{{ item.amount }}</text>元</view>
								<view class="ticket-desc">{{ item.desc }}</view>
							</view>
							<view class="ticket-notch left"></view>
							<view class="ticket-notch right"></view>
							<view class="ticket-dash"></view>
						</view>
					</view>
				</view>
			</view>
			-->

			<!-- 筛选区域 -->
			<view class="filter-section">
				<view class="filter-tabs">
					<view
						class="filter-tab"
						:class="{ active: currentTab === 0 }"
						@click="switchTab(0)"
					>智能推荐{{ currentTab === 0 ? ' ▼' : '' }}</view>
					<view
						class="filter-tab"
						:class="{ active: currentTab === 1 }"
						@click="switchTab(1)"
					>距离{{ currentTab === 1 ? ' ▼' : '' }}</view>
					<view
						class="filter-tab"
						:class="{ active: currentTab === 2 }"
						@click="switchTab(2)"
					>价格{{ currentTab === 2 ? ' ▼' : '' }}</view>
					<view
						class="filter-tab"
						:class="{ active: currentTab === 3 }"
						@click="switchTab(3)"
					>其他筛选{{ currentTab === 3 ? ' ▼' : '' }}</view>
				</view>
			</view>
		</view>
		<!--
		<view class="background-grey-color">
		-->
		<view>
			<!-- VIP图片 -->
			<view class="vip-image-section">
				<image src="https://static.lixingpt.com/5cf033b7-a03f-4282-85c2-02095326e579.png" class="vip-image" mode="aspectFit" />
			</view>
			
			<!-- 充电站列表 -->
			<scroll-view 
				scroll-y="true" 
				class="station-list" 
				@scrolltolower="loadMore"
				@refresherrefresh="onRefresh"
				:refresher-enabled="false"
				:refresher-triggered="refreshing"
				refresher-background="#f0f0f0"
			>
				<!-- 充电站列表 -->
				<station-card 
					v-for="(station, index) in stationList" 
					:key="index" 
					:station="station"
					:show-location-click="true"
					@card-click="goToStation"
					@location-click="goToStationLocation"
					v-if="currentTab !== 2"
				/>
				
				<!-- 驿站列表 -->
				<view v-if="currentTab === 2">
					<view class="box_14" v-for="(item, index) in storeList" :key="item.id">
						<view class="box_15 flex">
							<view class="box_16">{{ item.name }}</view>
							<view class="box_17">营业中</view>
						</view>

						<view class="box_18">营业时间：{{ item.startWorkTime }}～{{ item.endWorkTime }}</view>

						<view class="box_19">{{ item.address }}</view>

						<view class="box_20 flex flex-align-center flex-justify-around">
							<image src="https://bc-1306761403.cos.ap-shanghai.myqcloud.com/a8114efe-76a4-4988-9891-bff00a11de66.png " mode="" />
							<view class="box_21" :data-phone="item.phone" @tap.stop.prevent="contact">联系店铺</view>
						</view>

						<view class="box_22" v-if="item.dist"></view>

						<view class="box_23" v-if="item.dist" @tap.stop.prevent="goOrder" :data-item="item" :data-index="index" :data-id="item.id">
							<image src="@/static/images/24.png" mode="" />
							<view class="box_24">{{ item.dist }}km</view>
						</view>

						<view
							v-if="index == 0 && item.dist"
							class="box_55"
							style="background-image: url(https://bc-1306761403.cos.ap-shanghai.myqcloud.com/9bf5259b-65fb-4c08-95f9-d60a25ec0680.png); background-size: cover"
						></view>
					</view>
					
					<!-- 加载更多提示 -->
					<view class="loading-more" v-if="storeLoading && storeList.length > 0">
						<text class="loading-text">正在加载更多...</text>
					</view>
					
					<!-- 没有更多数据提示 -->
					<view class="no-more" v-if="!storeLoading && storeList.length > 0 && storeTotal <= storeList.length">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<smart-tabbar></smart-tabbar>
	</view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue';
import { getChargeStationList } from '@/api/charging/index.js'
import { getRecords } from '@/api/index/index.js'
import locationManager from '@/utils/location.js'
import StationCard from '@/components/station-cardDemo/index.vue'

export default {
	components: {
		SmartTabbar,
		uniIcons,
		uniCountdown,
		StationCard
	},
	data() {
		return {
			statusBarHeight: 0,
			customRightPadding: 0, // 新增：自定义右外距
			stationList: [],
			// 新增驿站列表数据
			storeList: [],
			defalutQuery: {
				latitude: '',
				longitude: '',
				rows: 20
			},
			couponList: [
				{ amount: 3, desc: '完成首单返' },
				{ amount: 2, desc: '完成2单返' },
				{ amount: 2, desc: '完成3单返' }
			],
			currentTab: 0, // 新增tab状态
			refreshing: false, // 新增下拉刷新状态
			page: 1, // 新增页码
			total: 0, // 新增总数
			loading: false, // 新增加载状态
			storeLoading: false, // 驿站列表加载状态
			refreshingStore: false, // 驿站列表下拉刷新状态
			storePage: 1, // 驿站列表页码
			storeTotal: 0, // 驿站列表总数
			storeList: [] // 驿站列表数据
		}
	},
	onLoad() {
		console.log('充电模块加载完成');
		var systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		// 动态计算右外距，避免与微信原生胶囊按钮重叠
		this.calculateCustomRightPadding();
		
		// 获取位置信息并调用充电站列表接口
		this.initLocationAndLoadData();
	},
	
	onShow() {
		// 当页面显示时，恢复卡片显示
		// this.showCards(); // 移除此行
	},
	methods: {
		// 动态计算右外距，避免与微信原生胶囊按钮重叠
		calculateCustomRightPadding() {
			try {
				const systemInfo = uni.getSystemInfoSync();
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				
				// 计算需要的右外距：屏幕宽度 - 胶囊按钮左边界 + 额外间距
				const requiredPadding = systemInfo.screenWidth - menuButtonInfo.left; 
				this.customRightPadding = requiredPadding;
				
				console.log('计算的右外距:', this.customRightPadding, 'px');
				console.log('胶囊按钮信息:', menuButtonInfo);
			} catch (error) {
				console.error('计算右外距失败，使用默认值:', error);
				// 如果计算失败，使用默认值
				this.customRightPadding = 150; // 默认150px
			}
		},
		
		// 初始化位置并加载数据
		initLocationAndLoadData() {
			// 获取当前位置
			const currentLocation = locationManager.getCurrentLocation();
			console.log('当前位置信息:', currentLocation);
			
			// 检查位置是否过期
			if (locationManager.isLocationExpired(currentLocation)) {
				console.log('位置信息已过期，重新获取');
				locationManager.updateLocation((err, newLocation) => {
					if (!err) {
						this.loadChargeStationList(newLocation);
					} else {
						// 使用过期位置或默认位置
						this.loadChargeStationList(currentLocation);
					}
				});
			} else {
				// 使用当前位置
				this.loadChargeStationList(currentLocation);
			}
		},
		
		// 加载充电站列表
		loadChargeStationList(location) {
			const params = {
				stationLat: location.latitude.toString(),
				stationLng: location.longitude.toString(),
				rows: '20',
				page: this.page.toString(),
				sortType: '1'
			};
			
			console.log('调用充电站列表接口，参数:', params);
			this.getChargeStationList('1', params);
		},
		
		// 获取充电站列表
		getChargeStationList(sortType = '1', customParams = null) {
			// 获取当前位置
			const currentLocation = locationManager.getCurrentLocation();
			
			const params = customParams || {
				latitude: currentLocation.latitude,
				longitude: currentLocation.longitude,
				rows: '20',
				page: this.page.toString(),
				sortType: sortType
			};
			
			console.log('调用充电站列表接口，参数:', params);
			
			getChargeStationList(params).then(res => {
				console.log('充电站列表接口返回:', res);
				if (res.code === 0 && res.success) {
					// 将接口数据转换为页面需要的格式
					const records = res.data.records || [];
					
					if (this.page === 1) {
						// 第一页，直接替换数据
					this.stationList = records.map(item => ({
						id: item.stationId || 0,
						name: item.stationName || '未知站点',
						distance: (item.dist ? item.dist + 'km' : '距离未知'),
						facilities: item.facilities || '暂无设施信息',
						price: item.fee || '0.00',
						status: 'available',
						availableCount: item.fastRate ? parseInt(item.fastRate.split('/')[0]) : 0,
						totalCount: item.fastRate ? parseInt(item.fastRate.split('/')[1]) : 0,
						// 新增字段
						shopName: item.shopName || null,
						fastRate: item.fastRate || '0/0',
							slowRate: item.slowRate || '0/0', // 添加慢充信息
							parkFee: this.truncateText(item.parkFee || '停车信息未知', 20),
							// 添加经纬度字段
							stationLat: item.stationLat,
							stationLng: item.stationLng
						}));
					} else {
						// 加载更多，追加数据
						const newRecords = records.map(item => ({
							id: item.stationId || 0,
							name: item.stationName || '未知站点',
							distance: (item.dist ? item.dist + 'km' : '距离未知'),
							facilities: item.facilities || '暂无设施信息',
							price: item.fee || '0.00',
							status: 'available',
							availableCount: item.fastRate ? parseInt(item.fastRate.split('/')[0]) : 0,
							totalCount: item.fastRate ? parseInt(item.fastRate.split('/')[1]) : 0,
							// 新增字段
							shopName: item.shopName || null,
							fastRate: item.fastRate || '0/0',
							slowRate: item.slowRate || '0/0', // 添加慢充信息
							parkFee: this.truncateText(item.parkFee || '停车信息未知', 20),
							// 添加经纬度字段
							stationLat: item.stationLat,
							stationLng: item.stationLng
						}));
						this.stationList = [...this.stationList, ...newRecords];
					}
					
					this.total = res.data.total || 0;
					this.page++;
					this.loading = false;
					this.refreshing = false;
					console.log('充电站列表更新成功，数据:', this.stationList);
				} else {
					console.error('充电站列表接口返回错误:', res.msg);
					uni.showToast({
						title: res.msg || '获取充电站列表失败',
						icon: 'none'
					});
					this.loading = false;
					this.refreshing = false;
				}
			}).catch(err => {
				console.error('充电站列表接口错误:', err);
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
				this.loading = false;
				this.refreshing = false;
			});
		},
		
		switchTab(idx) {
			this.currentTab = idx;
			
			// 重置分页参数
			this.page = 1;
			this.stationList = [];
			this.total = 0;
			
			if (idx === 2) {
				// 利行驿站：加载驿站列表
				this.getPostioning();
				console.log('选择利行驿站，加载驿站列表');
			} else {
				// 根据选择的tab设置排序类型
				const sortTypeMap = {
					0: '1', // 距离最近
					1: '2'  // 价格优先
				};
				
				// 获取当前位置并调用接口
				const currentLocation = locationManager.getCurrentLocation();
				this.loadChargeStationList(currentLocation);
			}
		},
		goToStation: function(station) {
			console.log('跳转到充电站详情，数据:', station);
			// 将 station 数据编码后传递到下一个页面
			const stationData = encodeURIComponent(JSON.stringify(station));
			uni.navigateTo({
				url: '/pages/station-detail/index?stationData=' + stationData
			});
		},
		
		loadMore: function() {
			console.log('加载更多数据');
			
			if (this.currentTab === 2) {
				// 驿站列表
				if (this.storeLoading || this.storeTotal <= this.storeList.length) {
					return;
				}
				this.storeLoading = true;
				this.getStoreRecords();
			} else {
				// 充电站列表
				if (this.loading || this.total <= this.stationList.length) {
					return;
				}
				this.loading = true;
				const currentLocation = locationManager.getCurrentLocation();
				this.loadChargeStationList(currentLocation);
			}
		},
		
		onRefresh() {
			console.log('下拉刷新');
			
			if (this.currentTab === 2) {
				// 驿站列表下拉刷新
				this.storePage = 1;
				this.storeList = [];
				this.storeTotal = 0;
				this.getStoreRecords();
			} else {
				// 充电站列表下拉刷新
				this.page = 1; // 重置页码
				this.stationList = []; // 清空列表
				this.total = 0; // 重置总数
				const currentLocation = locationManager.getCurrentLocation();
				this.loadChargeStationList(currentLocation);
			}
		},
		
		goToStationMap: function() {
			uni.navigateTo({
				url: '/packages/charging/station-map/index'
			});
		},
		
		goToScanCode: function() {
			uni.navigateTo({
				url: '/packages/charging/scan-code/index'
			});
		},
		
		goToChargeHistory: function() {
			uni.navigateTo({
				url: '/packages/charging/charge-history/index'
			});
		},
		
		goToWallet: function() {
			uni.navigateTo({
				url: '/packages/charging/wallet/index'
			});
		},
		goToSearchPage() {
			console.log('goToSearchPage');
			uni.navigateTo({
				url: '/pages/search/index'
			});
		},
		goToMap() {
			// 获取当前位置
			const currentLocation = locationManager.getCurrentLocation();
			
			// 准备传递给地图页面的数据
			const mapData = {
				entryType: 'map', // 标识从首页地图按钮进入
				stationList: this.stationList,
				userLat: currentLocation.latitude,
				userLng: currentLocation.longitude,
				hideCards: true, // 标记隐藏卡片
				// 添加充电站经纬度信息
				stationCoordinates: this.stationList.map(station => ({
					id: station.id || station.stationId, // 兼容两种ID字段
					name: station.name || station.stationName,
					latitude: station.stationLat,
					longitude: station.stationLng,
					stationData: station
				}))
			};
			
			// 编码数据并跳转
			const encodedData = encodeURIComponent(JSON.stringify(mapData));
			uni.navigateTo({
				url: `/pages/map/map?mapData=${encodedData}`
			});
		},
		
		// 文字截断方法
		truncateText(text, maxLength) {
			if (!text || text.length <= maxLength) {
				return text;
			}
			return text.substring(0, maxLength) + '...';
		},
		
		// 获取驿站列表
		getStoreRecords() {
			// 更新查询参数
			this.defalutQuery.page = this.storePage;
			
			getRecords(this.defalutQuery).then((res) => {
				if (res.code === 0 && res.success && res.data) {
					const records = res.data.records || [];
					
					if (this.storePage === 1) {
						// 第一页，直接替换数据
						this.storeList = records;
					} else {
						// 加载更多，追加数据
						this.storeList = [...this.storeList, ...records];
					}
					
					this.storeTotal = res.data.total || 0;
					this.storePage++;
					this.storeLoading = false;
					this.refreshingStore = false;
					
				uni.setStorageSync('stroreList', res.data.records[0]);
				} else {
					console.error('获取驿站列表失败:', res.msg);
					this.storeLoading = false;
					this.refreshingStore = false;
				}
			}).catch(err => {
				console.error('驿站列表接口错误:', err);
				this.storeLoading = false;
				this.refreshingStore = false;
			});
		},
		
		// 获取定位并加载驿站列表
		getPostioning() {
			const that = this;
			// 重置分页参数
			this.storePage = 1;
			this.storeList = [];
			this.storeTotal = 0;
			
			// 获取当前位置
			const currentLocation = locationManager.getCurrentLocation();
			
			// 如果locationManager有位置信息，直接使用
			if (currentLocation && !currentLocation.isDefault) {
				that.defalutQuery.latitude = currentLocation.latitude;
				that.defalutQuery.longitude = currentLocation.longitude;
				that.getStoreRecords();
			} else {
				// 否则尝试获取实时位置
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						that.defalutQuery.latitude = res.latitude;
						that.defalutQuery.longitude = res.longitude;
						that.getStoreRecords();
					},
					fail: function (err) {
						console.log('获取位置失败，使用默认坐标:', err);
						// 使用locationManager的默认位置
						const defaultLocation = locationManager.getCurrentLocation();
						that.defalutQuery.latitude = defaultLocation.latitude;
						that.defalutQuery.longitude = defaultLocation.longitude;
						that.getStoreRecords();
					}
				});
			}
		},
		
		// 联系店铺
		contact(e) {
			uni.makePhoneCall({
				phoneNumber: e.currentTarget.dataset.phone
			});
		},
		
		// 跳转地图
		goOrder(e) {
			uni.openLocation({
				latitude: Number(e.currentTarget.dataset.item.latitude),
				longitude: Number(e.currentTarget.dataset.item.longitude),
				scale: 18,
				name: e.currentTarget.dataset.item.name,
				address: e.currentTarget.dataset.item.address,
				success: function (res) {
					console.log(res);
				},
				fail: function (err) {
					console.error(err);
				}
			});
		},
		goToMembershipCode() {
			// 尝试获取用户信息
			const userInfo = uni.getStorageSync('userInfo');
			const code = userInfo && userInfo.to_Account ? userInfo.to_Account : '';
			
			uni.navigateTo({
				url: `/packages/oldpages/pages/membershipCode/index?code=${code}`
			});
		},
		goToStationLocation(station) {
			if (station.stationLat && station.stationLng) {
				uni.openLocation({
					latitude: Number(station.stationLat),
					longitude: Number(station.stationLng),
					scale: 14, // 从18改为14，显示更多内容
					name: station.name || '未知站点',
					address: station.address || '未知地址',
					success: function (res) {
						console.log('打开地图成功', res);
					},
					fail: function (err) {
						console.error('打开地图失败', err);
					}
				});
			} else {
				uni.showToast({
					title: '站点位置信息不完整',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style scoped>
.charging-page {
	min-height: 100vh;
	background: linear-gradient( 180deg, #DEF2FA 0%, #FFFFFF 100%);
}

/* 左上角装饰方块 */
.decoration-block {
	position: absolute;
	top: 0;
	left: 0;
	width: 320rpx;
	height: 150rpx;
	background: rgba(190, 211, 255, 0.6);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	filter: blur(60px);
	transform: rotate(45deg);
	z-index: 1;
}

/* 右侧装饰图片 */
.car-image {
	position: absolute;
	right: 145rpx; /* 相对于piles图片的位置：20rpx + 216rpx */
	top: 85%;
	transform: translateY(-50%);
	width: 110rpx;
	height: 62rpx;
	z-index: 2;
}

.piles-image {
	position: absolute;
	right: 20rpx; /* 最右边 */
	top: 80%;
	transform: translateY(-50%);
	width: 216rpx;
	height: 216rpx;
	z-index: 2;
}


.station-jam {
	position: absolute;
  top: -5rpx;
  left: -1rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.station-jam-image {
	width: 110rpx;
	height: 44rpx;
}

.background-color {
	background: linear-gradient( 180deg, #DEF2FA 0%, #FFFFFF 100%);
}
.background-grey-color {
	background: #fbfbfb;
}

.status-bar {
	background: #fff;
}

.search-bar {
	background: #fff;
	border-radius: 20rpx;
	padding: 6rpx 4rpx 6rpx 30rpx;
	display: flex;
	align-items: center;
	margin: 0rpx 30rpx;
	/*
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	*/
	position: sticky;
	top: 0;
	z-index: 10;
	border: 2rpx solid #FFFFFF;
}

.station-header-section {
	background: transparent;
	border-radius: 30rpx;
	padding: 6rpx 0 6rpx 6rpx; /* 只保留左、上、下的padding */
	display: flex;
	align-items: center;
	margin: 0 10rpx 0rpx 10rpx; /* 去掉上外距，只保留下、左、右外距 */
	position: sticky;
	top: 0;
	z-index: 10;
}

.station-title-section {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 0 30rpx; /* 去掉右外距，只保留左外距 */
	height: 100rpx;
}

.station-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.station-icon-circle {
	width: 60rpx;
	height: 60rpx;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.station-icon {
	width: 40rpx;
	height: 40rpx;
}

.search-bar-left {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.map-icon {
	width: 29rpx;
	height: 29rpx;
}

.search-bar-left:active {
	opacity: 0.7;
}

.search-bar-title {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
	margin-left: 10rpx;
}

.search-bar-divider {
  width: 2rpx;
  height: 36rpx;
  background: #e5e5e5;
  margin: 0 18rpx;
}

.search-input-container {
	display: flex;
	align-items: center;
	flex: 1;
	
}

.search-bar-input {
	flex: 1;
	font-size: 24rpx;
	color: #333;
	padding-right: 10rpx; /* 为搜索按钮留出空间 */
}

.search-bar-placeholder {
	color: #999;
}

.search-button {
	width: 92rpx;
	height: 52rpx;
	background: linear-gradient(181deg, #55CA64 0%, #2ADE69 100%);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	cursor: pointer;
}

/* 功能图片区域样式 */
.function-images-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 30rpx;
}

.function-image-item {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-start;
}

.function-image {
	height: 120rpx;
}

/* 单行图片区域样式 */
.single-image-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 30rpx;
}

.single-image1 {
	width: 100%;
	height:100px
}

.single-image2 {
	width: 100%;
	height:100px
}

.single-image3 {
	width: 100%;
	height:120px
}

/* VIP图片样式 */
.vip-image-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0rpx 30rpx;
}

.vip-image {
	width: 100%;
	height: 100rpx;
}

.promotion-section {
	padding: 20rpx 30rpx;
}

.promotion-card {
	background: linear-gradient(135deg, #ff6b35 0%, #ff8f42 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	color: white;
}

.promotion-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.promotion-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

.promotion-title {
	margin-left: 10rpx;
	font-size: 32rpx;
	font-weight: bold;
	flex: 1;
}

.countdown {
	display: flex;
	align-items: center;
	margin-right: 10rpx;
}

.countdown-text {
	font-size: 24rpx;
	margin-right: 10rpx;
}

.countdown-time {
	background: rgba(255, 255, 255, 0.2);
	padding: 4rpx 8rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
	min-width: 40rpx;
	text-align: center;
}

.countdown-separator {
	font-size: 24rpx;
	margin: 0 5rpx;
}

.promotion-coupons {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.coupon-ticket {
	position: relative;
	background: #fff7ec;
	border-radius: 16rpx;
	margin: 0 10rpx;
	width: 32%;
	min-width: 180rpx;
	height: 140rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: visible;
}
.ticket-lock {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
.lock-bg {
	width: 48rpx;
	height: 36rpx;
	background: rgba(139, 139, 139, 0.7);
	border-top-right-radius: 16rpx;
	border-bottom-left-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lock-icon {
	width: 14rpx;
	height: 14rpx;
}
.ticket-content {
	z-index: 1;
	width: 100%;
	text-align: center;
	padding-top: 0;
}
.ticket-amount {
	color: #ff6b35;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}
.ticket-desc {
	color: #ff6b35;
	font-size: 24rpx;
	margin-top: 24rpx;
}
.ticket-notch {
	position: absolute;
	top: 60%;
	width: 24rpx;
	height: 24rpx;
	background: #ff7e29;
	border-radius: 50%;
	z-index: 2;
	transform: translateY(-50%);
}
.ticket-notch.left {
	left: -13rpx;
	clip-path: inset(0 0 0 50%);
}
.ticket-notch.right {
	right: -13rpx;
	clip-path: inset(0 50% 0 0);
}
.ticket-dash {
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	top: 83rpx;
	height: 0;
	border-top: 2rpx dashed #ffd6a0;
	z-index: 1;
}

.filter-section {
	background: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	background: transparent;
	justify-content: space-between;
	align-items: center;
}

.filter-tabs {
	display: flex;
	justify-content: space-between;
	flex: 1;
}

.filter-tab {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	padding-bottom: 5rpx;
}

.filter-tab.active {
	color: #222;
	font-weight: bold;
}

.result-count {
	display: flex;
	align-items: center;
}

.count-text {
	font-size: 24rpx;
	color: #666;
}

.count-number {
	font-size: 24rpx;
	color: #ff6b35;
	margin: 0 5rpx;
}

/* 移除站点卡片相关样式，现在使用StationCard组件 */

/* 保留其他样式 */
.station-list {
	height: 100vh;
	background: transparent;
	/* padding: 0 0; */
	padding-bottom: 120rpx;
}

/* 驿站列表样式 */
.box_13 {
	margin-top: 80rpx;
	margin-left: 43rpx;
	width: 134rpx;
	height: 44rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #1f2229;
	line-height: 44rpx;
	margin-bottom: 24rpx;
}

.box_14 {
	width: 690rpx;
	height: 230rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(218, 218, 218, 0.5);
	border-radius: 16rpx;
	margin: 0 auto;
	margin-bottom: 24rpx;
	position: relative;
}

.box_15 {
	margin-top: 26rpx;
	margin-left: 40rpx;
}

.box_16 {
	height: 42rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 42rpx;
}

.box_17 {
	width: 60rpx;
	font-size: 20rpx;
	margin-left: 12rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #0f44a2;
	line-height: 42rpx;
}

.box_18 {
	width: 272rpx;
	height: 34rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8d96a5;
	line-height: 34rpx;
	margin-left: 40rpx;
	margin-top: 8rpx;
}

.box_19 {
	width: 356rpx;
	height: 34rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8d96a5;
	line-height: 34rpx;
	margin-left: 40rpx;
	margin-top: 8rpx;
}

.box_20 {
	width: 127rpx;
	height: 42rpx;
	background: linear-gradient(163deg, #ff7935 0%, #fc5f0f 100%);
	border-radius: 6rpx;
	border: 1rpx solid #ff7b3a;
	margin-left: 40rpx;
	margin-top: 18rpx;
}

.box_20 image {
	width: 22rpx;
	height: 18rpx;
}

.box_21 {
	width: 80rpx;
	height: 28rpx;
	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	line-height: 28rpx;
}

.box_22 {
	position: absolute;
	height: 148rpx;
	border: 2rpx dashed #eff6ff;
	right: 218rpx;
	top: 50%;
	transform: translate(0, -50%);
}

.box_23 {
	position: absolute;
	right: 78rpx;
	top: 74rpx;
	text-align: center;
}

.box_23 image {
	width: 44rpx;
	height: 44rpx;
}

.box_24 {
	height: 32rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #0f44a2;
	line-height: 32rpx;
}

.box_55 {
	position: absolute;
	right: 0;
	top: 0;
	width: 108rpx;
	height: 46rpx;
}

/* flex 工具类 */
.flex {
	display: flex;
}

.flex-align-center {
	align-items: center;
}

.flex-justify-around {
	justify-content: space-around;
}

/* 驿站列表样式 */
.store-list {
	height: 60vh;
	padding: 20rpx;
}

/* 加载更多提示 */
.loading-more {
	text-align: center;
	padding: 30rpx 0;
}

.loading-text {
	font-size: 24rpx;
	color: #999;
}

/* 没有更多数据提示 */
.no-more {
	text-align: center;
	padding: 30rpx 0;
}

.no-more-text {
	font-size: 24rpx;
	color: #ccc;
}

/* 自定义滚动条样式 */
.station-list::-webkit-scrollbar {
	width: 6rpx;
}

.station-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3rpx;
}

.station-list::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3rpx;
}

.station-list::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}
</style> 